<!---->
<template>
  <view class="film-coupon">
    <view v-if="hasFilm() || hasGoods()" class="main">
      <template v-if="hasFilm()">
        <view class="title">
          <view class="b fs30 fc3 mr10">兑换券 </view>
          <view class="fs24 fc-gray"
            >未使用的兑换券，请在【我的-电影券】查看</view
          >
        </view>
        <view class="tip"
          >选择影片-选择座位-确定选座，点击我的优惠券勾选使用</view
        >
        <coupon-box
          class="film-coupon__coupon-box"
          v-for="item in couponData.filmCouponList"
          :key="item.code"
        >
          <view slot="left" class="film-coupon__coupon-main">
            <view style="box-sizing: border-box">
              <view class="film-coupon__coupon-money">{{
                item.name || '--'
              }}</view>
              <view
                >有效期： {{ dateFmt(item.startTime) || '--' }}~{{
                  dateFmt(item.endTime) || '--'
                }}</view
              >
            </view>
          </view>

          <view slot="right">
            <view class="film-coupon__coupon-btn" @click="toUse()"
              >立即使用</view
            >
          </view>
        </coupon-box>
      </template>

      <template v-if="hasGoods()">
        <view class="title">
          <view class="b fs30 fc3 mr10">卖品券 </view>
          <!-- <view class="fs24 fc-gray"
            >未使用的兑换券，请在【我的-商品取货码】查看</view
          > -->
        </view>
        <view class="tip">到影城柜台出示卖品券取货码进行兑换</view>
        <coupon-box
          class="film-coupon__coupon-box"
          v-for="item in couponData.goodsCouponList"
          :key="item.couponId"
        >
          <view slot="left" class="film-coupon__coupon-main">
            <view style="box-sizing: border-box">
              <view class="film-coupon__coupon-money">{{
                item.name || '--'
              }}</view>
              <view
                >有效期： {{ dateFmt(item.startTime) || '--' }}~{{
                  dateFmt(item.endTime) || '--'
                }}</view
              >
            </view>
          </view>

          <view slot="right">
            <view class="film-coupon__coupon-btn" @click="toUse(item)"
              >取货码</view
            >
          </view>
        </coupon-box>
      </template>
    </view>
    <view v-else class="zm-empty">
      <image
        :src="imgInfo['couponTT'].icon || src"
        class="zm-empty__image"
        mode="aspectFit"
        :style="imgInfo['couponTT'].style"
      />
    </view>
    <coupon-detail
      v-if="isShow && hasGoods()"
      v-model="isShow"
      :obj="couponInfo"
      :arr="flatNewList"
      :qr-url="qrUrl"
    ></coupon-detail>
    <!-- <qr-code
      v-if="isShow && hasGoods()"
      v-model="isShow"
      :qr-code="qrCode"
    ></qr-code> -->
    <view class="btn-main">
      <view class="btn" @click="toMine()">我的订单</view>
    </view>
  </view>
</template>
<script>
  import CouponBox from '@/pagesOrder/components/CouponBox/index.vue'
  import images from '@/commons/ZmMescrollEmpty/const.js'
  import { dateFmt } from '@/utils/index.ts'
  import CouponDetail from '@/pagesOrder/components/CouponDetail/index.vue'
  export default {
    name: 'film-coupon',
    components: { CouponBox, CouponDetail },
    mixins: [],
    data() {
      return {
        dateFmt,
        isShow: false,
        couponInfo: {},
        cardCode: '',
        qrCode: '',
        fromPage: '',
        flag: false,
        selBox: [],
        maxNum: 1,
        filmPrice: '',
        orderId: '',
        fromPath: '',
        singleSeatPrice: '',
        isAutoBind: false,
        couponData: []
        // query: {}
      }
    },
    onShow() {
      console.log(
        'canIUse',
        tt.canIUse('createOrder.object.skuList.associateInfo.subcard')
      )
      this.listLoad()
      // filmApi.getHotFilmList().then((res) => {
      //   this.filmList = res
      // })
    },
    methods: {
      listLoad() {
        this.$msg.loading()
        uni.$api.getCouponList
          .getCouponList()
          .then((res) => {
            this.$msg.hideLoading()
            uni.stopPullDownRefresh()
            this.couponData = res
            console.log('this.couponId', this.couponId)
            if (this.couponId) {
              let hasCode = false
              let val = null
              console.log('this.couponData', this.couponData)
              this.couponData.goodsCouponList.forEach((item) => {
                if (this.couponId === item.couponId && item.code) {
                  hasCode = true
                  val = item
                }
              })
              console.log('hasCode', this.couponId, val)
              if (hasCode) {
                this.couponId = ''
                this.$msg.hideLoading()
                this.isShow = true
                this.couponInfo = val
              } else {
                setTimeout(() => {
                  this.listLoad()
                }, 2000)
              }
            }

            return res
          })
          .catch((e) => {
            console.log('catchcatchcatch', e)
            this.$msg.hideLoading()
            uni.stopPullDownRefresh()
          })
      },
      getDouyinStatus(douyinOrderNo) {
        apis
          .getDouyinStatus({ douyinOrderNo })
          .then((res) => {
            if (res.douyinStatus && res.douyinStatus === 0) {
              this.getDouyinStatus()
            } else {
              setTimeout(() => {
                this.listLoad()
              }, 2000)
            }
          })
          .catch(() => {
            uni.stopPullDownRefresh()
          })
      },
      getQrcode(item) {
        if (this.couponId && this.couponId === item.couponId) {
          // this.$msg.loading('核销券码中,请稍后再次点击')
          // setTimeout(() => {
          //   this.$msg.hideLoading()
          //   this.listLoad()
          // }, 3000)
          return
        }
        if (!tt.canIUse('createOrder.object.skuList.associateInfo.subcard')) {
          this.$msg.toast('当前版本不支持该功能请升级抖音')
          return
        }
        this.$msg
          .showModal({
            title: '兑换提醒',
            content: '确认兑换卖品取货码?确认后不可退款。',
            confirmText: '确认兑换'
          })
          .then(() => {
            const getGoodsOrderData = apis.getGoodsOrderData
            this.$msg.loading('核销中,请稍后')
            const params = { douyinOrderNo: item.douyinOrderNo }
            getGoodsOrderData(params).then((res) => {
              res.success = (res) => {
                console.log('success', res)
                setTimeout(() => {
                  this.couponId = item.couponId
                  // this.getDouyinStatus(item.douyinOrderNo)
                  this.listLoad()
                }, 2000)
              }
              res.fail = (res) => {
                console.log('fail', res)
                this.$msg.hideLoading()
                const { orderId, outOrderNo, errNo, errMsg, errLogId } = res
                if (errLogId) {
                  console.log('预下单失败', errNo, errMsg, errLogId)
                }
                if (orderId || outOrderNo) {
                  console.log('支付失败', errNo, errMsg, orderId, outOrderNo)
                }
                if (
                  getApp() &&
                  getApp().globalData &&
                  getApp().globalData.debug
                ) {
                  console.log('兑换提醒')
                  this.$msg.showModal({
                    title: '温馨提示',
                    content: JSON.stringify(res)
                  })
                }
                const getDouYinOrderResult = apis.getDouYinOrderResult
                getDouYinOrderResult({
                  errMsg: JSON.stringify(res)
                })
              }
              // res.callbackData = JSON.parse(res.callbackData)
              console.log('createOrder', res)
              tt.createOrder(res)
            })
          })
      },
      onPullDownRefresh() {
        this.listLoad()
      },
      onReachBottom() {
        // this.listLoad()
      },
      toUse(val) {
        if (val) {
          if (val.code) {
            this.isShow = true
            this.couponInfo = val
          } else {
            if (val.goodsMallType === '3') {
              this.$msg.toast('请先兑换影票再获取卖品取货码')
            } else {
              this.getQrcode(val)
            }
          }
        } else {
          const isSingle = this.$auth.getSingleModel()
          console.log('isSingle', isSingle)
          if (isSingle) {
            // 多影城到影院选择
            const query = this.$utils.encode({
              fromHome: '2'
            })

            this.$tools.navigateTo(
              `/subPages/selectFilm/selectFilm?query=${query}`
            )
          } else {
            // 单影城排期页面
            this.$tools.navigateTo(`/subPages/selectCinema/selectCinema`, {
              cinemaId: this.$auth.getLocBaseSet().cinemaId,
              planDate: this.$utils.dateFmt(new Date())
            })
          }
        }
      },
      toDetail(id) {
        // #ifndef MP-TOUTIAO
        const query = { couponId: id, isFromSureOrder: this.fromPage }
        this.$tools.navigateTo('/subPages/rightsCodeDetail/index', query)
        // #endif
      },
      backClick() {
        if (this.fromPath === 'pagesOrder/sureOrder/index') {
          uni.setStorageSync('filmCouponBack', '1')
          this.$tools.navigateTo(-1)
        } else if (this.isAutoBind) {
          //自动绑定
          this.$tools.navigateTo('/pages/index/index', {}, 'switchTab')
        } else {
          this.$tools.navigateTo('/pages/mine/index', {}, 'switchTab')
        }
      },
      toMine() {
        // const getDouYinOrderData = apis.getDouYinOrderData
        // getDouYinOrderData().then((res) => {
        //   console.log('res', res)
        //   res.success = (res) => {
        //     console.log('success', res)
        //   }
        //   res.fail = (res) => {
        //     console.log('fail', res)
        //   }

        //   tt.createOrder(res)
        //   return res
        // })
        // return
        this.$tools.navigateTo('/pages/mine/index', {}, 'switchTab')
      },
      hasFilm() {
        return (
          this.couponData &&
          this.couponData.filmCouponList &&
          this.couponData.filmCouponList.length > 0
        )
      },
      hasGoods() {
        return (
          this.couponData &&
          this.couponData.goodsCouponList &&
          this.couponData.goodsCouponList.length > 0
        )
      }
    },

    computed: {
      limitNum() {
        return this.activeTab === '1' ? +this.maxNum : 1
      },
      checkFilmCouponType() {
        return this.fromPage !== 'sureOrder' ? '1' : '2'
      },
      imgInfo() {
        return images
      },
      flatNewList() {
        return this.couponData.goodsCouponList || []
      },
      qrUrl() {
        const arr = []
        this.flatNewList.forEach((item) => {
          arr.push(this.$utils.qrcodeCreate(item.code))
        })
        console.log('qrUrl', arr)
        return arr
      }
    }
  }
</script>
<style lang="scss" scoped>
  .film-coupon {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 180rpx;
    background: #f3f5f7;
    .main {
      padding: 0 20rpx 20rpx 20rpx;
      flex: 1;
      overflow-y: auto;
    }
    .btn-main {
      height: 160rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      padding: 0 20rpx 40rpx 20rpx;
      box-sizing: border-box;
      width: 100%;
      bottom: 0rpx;
      .btn {
        width: 100%;
        height: 100rpx;
        background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
        border-radius: 20rpx;
        color: #fff;
        font-size: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .zm-empty {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 85rpx;
      &__image {
        height: 450rpx;
        width: 488rpx;
        display: block;
      }
    }
    .title {
      display: flex;
      align-items: flex-end;
      margin: 30rpx 0 0 10rpx;
    }
    .tip {
      background-color: #fdf7d7;
      color: #f8a82d;
      font-size: 24rpx;
      padding-left: 30rpx;
      line-height: 60rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      height: 60rpx;
      margin: 20rpx 0;
    }

    // 内容
    &__content {
      padding: 20rpx;
    }
    &__coupon-main {
      box-sizing: border-box;
      margin-left: 29rpx;
      font-size: 24rpx;
      height: 100%;
      color: #919191;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    &__coupon-money {
      margin: 0 0 14rpx 0;
      font-size: 34rpx;
      font-weight: 600;
      color: #333333;
    }
    &__coupon-btn {
      margin-top: 50%;
      margin-left: 48%;
      transform: translate(-50%, -50%);
      width: 130rpx;
      height: 56rpx;
      background: linear-gradient(135deg, #ffa633 0%, #f8a82d 100%);
      border-radius: 16rpx;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 56rpx;
      text-align: center;
    }
    &__select {
      overflow: hidden;
    }
    &__use-bg {
      margin-top: 50%;
      margin-left: 48%;
      transform: translate(-50%, -50%);
      width: 96rpx;
      height: 96rpx;
    }
    &__use {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/use-active.png)
        no-repeat;
      background-size: 100%;
    }
    &__no-use {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/use-noActive.png)
        no-repeat;
      background-size: 100%;
    }
    &__ck {
      position: absolute;
      top: 0;
      right: 0;
      width: 50rpx;
      height: 50rpx;
    }
    &__check {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/check.png)
        no-repeat;
      background-size: 100%;
    }
    &__no-check {
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/no-check.png)
        no-repeat;
      background-size: 100%;
    }
    &__coupon-status--freeze {
      margin-top: 48%;
      margin-left: 48%;
      transform: translate(-50%, -50%);
      width: 96rpx;
      height: 96rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/coupon-freeze.png)
        no-repeat;
      background-size: 100%;
    }
  }
</style>
